<template>
    <div class="flex flex-jc-sb gap-20">
        <div class="flex-item flex-1 border mg-l-16">
            <div class="flex flex-ai-c">
                <img class="icon" src="../../../assets/home/icon-1.png" alt="">
                <span class="fs-12 fc-lightgray mg-l-10">实发金额</span>
                <div class="mg-l-10">
                    <span class="fs-12">¥</span>
                    <i class="fs-18 bold">{{ detail.payTotalMoney }}</i>
                </div>
                <div class="mg-l-10 bg">共{{ detail.payOrderCount }}个项目</div>
            </div>
            <div class="flex mg-t-20">
                <div>
                    <div class="fs-12 fc-lightgray">已领金额</div>
                    <div class="fs-14 mg-t-5 text-i bold"><span>¥</span>{{  detail.payReceiveTotalMoney }}</div>
                </div>
                <div class="mg-l-30">
                    <div class="fs-12 fc-lightgray">待领金额</div>
                    <div class="fs-14 mg-t-5 text-i bold"><span>¥</span>{{ detail.payAvailableTotalMoney }}</div>
                </div>
                <div class="mg-l-30">
                    <div class="fs-12 fc-lightgray">停发金额</div>
                    <div class="fs-14 mg-t-5 text-i bold"><span>¥</span>{{ detail.payStopTotalMoney }}</div>
                </div>
            </div>
        </div>
        <div class="flex-item flex-1 mg-l-30">
            <div class="flex flex-ai-c">
                <img class="icon" src="../../../assets/home/icon-2.png" alt="">
                <span class="fs-12 fc-lightgray mg-l-10">实发预支</span>
                <div class="mg-l-10">
                    <span class="fs-12">¥</span>
                    <i class="fs-18 bold">{{ detail.totalPracticalAdvanceAmount }}</i>
                </div>
                <div class="mg-l-10 bg">共{{ detail.advanceOrderCount }}笔</div>
            </div>
            <div class="flex mg-t-20">
                <div>
                    <div class="fs-12 fc-lightgray">已领预支</div>
                    <div class="fs-14 mg-t-5 text-i bold"><span>¥</span>{{ detail.totalSalaryAdvanceAmount }}</div>
                </div>
                <div class="mg-l-30">
                    <div class="fs-12 fc-lightgray">待领预支</div>
                    <div class="fs-14 mg-t-5 text-i bold"><span>¥</span>{{ detail.totalUnclaimedAdvanceAmount }}</div>
                </div>
                <div class="mg-l-30">
                    <div class="fs-12 fc-lightgray">停发预支</div>
                    <div class="fs-14 mg-t-5 text-i bold"><span>¥</span>{{ detail.totalStopAdvanceAmount }}</div>
                </div>
            </div>
        </div>
        <!-- <div class="left">
            <div class="flex">
                <div class="name">发薪项目</div>
                <div class="value mg-l-10"><span class="bold">{{ detail.payOrderCount ?? 0 }}</span>个</div>
            </div>
            <div class="flex mg-t-16">
                <div class="name">预支单</div>
                <div class="value mg-l-10"><span class="bold">{{ detail.advanceOrderCount ?? 0 }}</span>笔</div>
            </div>
        </div>
        <div class="flex flex-jc-sb flex-1">
            <div class="flex-item" v-for="(i, index) in trendData" :key="index">
                <div class="fc-lightgray">{{ i.name }}</div>
                <div class="bold mg-t-16"><span>{{ i.prefix }}</span> {{ i.value ?? 0 }} <span>{{ i.subfix }}</span></div>
            </div>
        </div> -->
    </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus';
import { queryCollectData } from '@/api/advance.ts';
export default defineComponent({
    props: {
        dateValue: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            detail: {} as any,
            trendData: {
                payTotalMoney: {
                    name: '实发金额',
                    value: 0,
                    prefix: '¥',
                    subfix: ''
                },
                payReceiveTotalMoney: {
                    name: '领薪金额',
                    value: 0,
                    prefix: '¥',
                    subfix: ''
                },
                payAvailableTotalMoney: {
                    name: '待领金额',
                    value: 0,
                    prefix: '¥',
                    subfix: ''
                },
                payStopTotalMoney: {
                    name: '停发金额',
                    value: 0,
                    prefix: '¥',
                    subfix: ''
                },
                totalPracticalAdvanceAmount: {
                    name: '实发预支',
                    value: 0,
                    prefix: '¥',
                    subfix: ''
                },
                totalSalaryAdvanceAmount: {
                    name: '预支已领',
                    value: 0,
                    prefix: '¥',
                    subfix: ''
                },
                totalUnclaimedAdvanceAmount: {
                    name: '预支待领',
                    value: 0,
                    prefix: '¥',
                    subfix: ''
                },
                totalStopAdvanceAmount: {
                    name: '预支停发',
                    value: 0,
                    prefix: '¥',
                    subfix: ''
                },
            } as any
        }
    },
    watch: {
        dateValue: {
            handler(newval) {
                if (newval) {
                    this.getData()
                }
            },
            immediate: true
        }
    },
    methods: {
        getData() {
            queryCollectData({
                queryMonth: this.dateValue
            }).then((res: any) => {
                this.detail = res
                for(const key in this.trendData) {
                    this.trendData[key].value = res[key]
                }
            })
        }
    }
})
</script>
<style lang="stylus" scoped>
.left
    position relative
.left::after
    position absolute
    right -10px
    top 0
    height 50px
    display inline-block
    content ''
    width 1px
    background linear-gradient(180deg, #FFFFFF 0%, #E8E9EA 49%, #FFFFFF 100%)
.name
    width 60px
    text-align right
.icon
    width auto
    height 16px
.bg
    background rgba(25, 137, 250, 0.1)
    color #1989FA
    padding 2px 8px
    border-radius 2px
.mg-l-30
    margin-left 36px
.border
    border-right 1px solid #DFE0EB
.text-i
    font-style italic
</style>